// 轮播图
class Banner{
    constructor(){
        this.imgBox= $(".img-box ul");
        this.imgW = $(".img-box ul li").width();
        this.len = $(".img-box ul li").length;
        this.point=$(".control li");
        this.plen =this.point.length;
        this.index=0;
        this.square=0;
        this.timer =null;
    }
    // 初始化
    init(){
        this.timer=setInterval(() => {
            this.autoPlay();
        }, 5000);
        this.addPointClick();
        this.addMouseEvent();
    }
    // 自动轮播
    autoPlay(){
        this.index++;
        if (this.index > this.len-1) {
            this.index = 1;
            this.imgBox.css({"marginLeft":0})
        }
        this.imgBox.stop().animate({marginLeft:-(this.imgW*this.index)},300);
        this.square++;
        this.square = this.square > (this.plen-1) ? 0:this.square;
        this.setPoint();
    }

    // 设置导航点
    setPoint(){
        this.point.eq(this.square).addClass("active")
        .siblings().removeClass("active");
    }

    // 给导航点添加点击事件
    addPointClick(){
        this.point.on("click",event=>{
            clearInterval(this.timer)
            let index= $(event.target).index()
            this.index=index;
            this.square=index;
            this.imgBox.stop().animate({marginLeft:-(this.imgW*this.index)},300);
            this.square = this.square > (this.plen-1) ? 0:this.square;
            this.setPoint();
        })
    }

    // 鼠标移入移出事件
    addMouseEvent(){
        this.imgBox.on("mouseenter",()=>{
            clearInterval(this.timer);
        })
        this.imgBox.on("mouseleave",()=>{
            clearInterval(this.timer);
            this.timer=setInterval(() => {
                this.autoPlay();
            }, 5000);
        })
    }

}

let banner = new Banner();
banner.init();


// 活动口风琴
$(".act-tab>a").on("mouseenter",event=>{
    let el = $(event.target);
    el.parent().addClass("active")
    .siblings().removeClass("active");
})

// tab选项卡数据渲染
function template(arr,count,el) {
    let str='';
    for (let i = count; i < (count+1)*5; i++) {
        str+=`
        <div class="list-item">
            <div class="item-time">
                <p>${arr[i].name}</p>
                <p>开课时间：${arr[i].startTime}</p>
            </div>
            <div class="item-price">
                ￥<span>${arr[i].price}</span>
            </div>
            <div class="item-pos">
                <p><span class="icon"></span>${arr[i].learnPlace}</p>
            </div>
            <div class="item-detail">
                <a href="#">查看详情</a>
            </div>
        </div>
        `
    }
    el.html(str);
}
function getData(url,index,el) {
    $.ajax({
        url:url,
        type:"get",
        success(res){
            let {data:{classList}} = res;
            // 渲染数据
            console.log(index);
            template(classList,index,el);
        },
        error(err){
            console.log(err);
        }
    })
}
$(".top-tab a").on("click",event=>{
    let el = event.target;
    let $content =$(".xiaoxue .common-list")
    let index = $(el).index();
    $(el).addClass("cur").siblings().removeClass("cur");
    getData("./data/classes.json",index,$content)
    
})
// 初始化
getData("./data/classes.json",0,$(".xiaoxue .common-list"))